<template>
  <div>
    <div class="top1">
      <div @click="fanhui" class="position">
        <icon name="arrow-left" />{{ name }}
      </div>
      <div class="search1">
        <search
          v-model="iptvalue"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </search>
      </div>
      <div class="more1" @click="showShare = true">
        <icon name="share-o" />
      </div>
    </div>
    <div class="navbar">
      <li>全城 <i class="fas fa-caret-down"></i></li>
      <li>{{ name }} <i class="fas fa-caret-down"></i></li>
      <li>智能排序 <i class="fas fa-caret-down"></i></li>
      <li>筛选 <i class="fas fa-caret-down"></i></li>
    </div>
    <div class="q1">
      <list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadData"
      >
        <card
          :title="item.name"
          :thumb="item.imgs"
          v-for="item in products"
          :key="item.id"
          @click="goto(item.id)"
        >
          <template #tags
            ><p>
              <p>综合评价指数：<rate v-model="value" readonly /></p>
              <span style="font-size: 1vw">
                1670条评价 人均: {{ item.avgPrice }}　环境: 9.1　服务: 9.0
              </span>
            </p>
            <p>地址：{{ item.address }}</p>
            <p>电话：0371-5643** 2183875492**</p>
            <p>特色：几个地方了</p>
            <p>营业时间：{{ item.openingHours }}</p>
          </template>
        </card>
      </list>
    </div>
    <share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { Toast, Icon, ShareSheet, Card, List, Search,Rate } from 'vant'
import { loadProductsAPI } from '../../services/products'
import { dalImg } from '../../utils/tools'
import router from '../../router'
import { get } from 'vant/lib/utils'
const { replace } = useRouter()
const router1 = useRouter()
const route = useRoute()
const value=ref(4)
const tid = ref(route.query.tid) // 分类id
const name = ref(route.query.name)
const iptvalue = ref('') //input框的值
console.log(name.value)
const products = ref([]) // 商品列表
//返回上一级
const fanhui = () => {
  router.go(-1)
}
//搜索框回车触发,
const onSearch = () => {
  alert(111)
}
//点击搜索框触发,
const onClickButton = () => {
  axios({
    method: 'get',
    url: 'http://47.104.75.203:8080/api/shop/query',
    params: {
      name: iptvalue.value
    },
    headers: {
      Authorization:
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdXQiOiIxODUzNzE1MjU2MyIsImV4cCI6MTcyNTI3NzI3NiwiaWF0IjoxNjY1Mjc3Mjc2fQ.u8CY_4c7A2u_9yJe4USbvOGTssk01jjqjTtOv5bfIAE'
    }
  }).then((res) => {
    console.log(res)
    console.log('mohucahcun')
    products.value = res.data.data
  })
}
//跳转
const goto = (i) => {
  router1.push({
    name: 'DETAIL',
    query: { tid: i }
  })
}
// 可以把路由router想象成一个访问记录的栈，router.replace() 是替换掉栈顶，而router.push() 则是向栈中再堆入一个新记录。
// 一般情况下，要做前进后退的浏览记录管理的，基本上都是用router.push()，但是也是有一些特殊情况需要用到router.replace()。
//分享
const showShare = ref(false)
const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' }
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' }
  ]
]
//获取商品
axios
  .get(`http://47.104.75.203:8080/api/shop/${tid.value}`, {
    id: 1,
    headers: {
      Authorization:
        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdXQiOiIxODUzNzE1MjU2MyIsImV4cCI6MTcyNTI3NzI3NiwiaWF0IjoxNjY1Mjc3Mjc2fQ.u8CY_4c7A2u_9yJe4USbvOGTssk01jjqjTtOv5bfIAE'
    }
  })
  .then((res) => {
    console.log(res)
    console.log('这是通过id获取店铺')
    products.value = res.data.data
  })
// loadProductsAPI('', tid.value).then((res) => {
//   console.log('根据分类id，获取该分类的商品')
//   console.log(res.data)
//   products.value = res.data
// })

// 加载更多
const page = ref(1)
const loading = ref(false) // 当loading为true的时候，触底之后会触发load事件
const finished = ref(false)
const pages = ref(1)
const loadDataFromServer = () => {
  loading.value = false // 开始加载数据
  const Toast1 = Toast.loading({
    message: '加载中...',
    forbidClick: true
  })
  axios
    .get(`http://47.104.75.203:8080/api/shop/${tid.value}`, {
      id: 1,
      headers: {
        Authorization:
          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdXQiOiIxODUzNzE1MjU2MyIsImV4cCI6MTcyNTI3NzI3NiwiaWF0IjoxNjY1Mjc3Mjc2fQ.u8CY_4c7A2u_9yJe4USbvOGTssk01jjqjTtOv5bfIAE'
      }
    })
    .then((res) => {
      console.log(res)
      products.value.push(...res.data.data)
      loading.value = true // 加载完成
      Toast1.clear()
      pages.value = 0 // 设置总页数
      page.value += 1
    })
}
const loadData = () => {
  // 当前页大于总页数的话，表示加载完成
  if (pages.value < page.value) {
    finished.value = true
    return
  }
  loadDataFromServer()
}
</script>
<style scoped>
.top1 {
  z-index: 999;
  position: relative;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search1 {
  flex: 1;
  position: relative;
}
.search1 input {
  padding: 0 10px;
  height: 30px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(21, 19, 19, 0.475);
  border: none;
}
.ss {
  font-size: 20px;
  position: absolute;
  top: 5px;
  left: calc(50% - 20px);
}
.position {
  width: 8rem;
  color: blue;
}

.more1 {
  font-size: 25px;
  width: 5rem;
}
/* topbar */
.navbar {
  margin-top: 10px;
  display: flex;
}
.navbar li {
  text-align: center;
  flex: 1;
}
</style>
